<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Final Exam of Advanced Mathematics</title>
    <link rel="stylesheet" href="exam.css">
    <link rel="stylesheet" href="about-us.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/carousel.css">
    <link rel="stylesheet" href="css/media.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="shortcut icon" href="../header-footer/images/ico.jpg" type="image/x-icon">
    <link rel="stylesheet" href="../header-footer/common.css">

</head>
<body>
    <header class="navbar">
        <div class="nav">
            <div class="logo">
                <a href="../Homepage/WebsiteHomepage.html"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <nav>
                <ul>
                    <!-- TODO 补充链接 -->
                    <li><a href="../Homepage/WebsiteHomepage.html">home page</a></li>
                    <li><a href="./courseList.html">course</a></li>
                    <li><a href="./league.html">Alliance colleges</a></li>
                    <li><a href="./about-us.html">About Us</a></li>
                </ul>
            </nav>
        </div>
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="Search for ">
            <button type="button" id="searchButton"><i class="fas fa-search"></i></button>
        </div>
        <div class="info">
            <!-- TODO 补充链接 -->
        </div>
    </header>

    <!-- 考试主体内容 -->
    <main class="exam-container">
        <h1 class="exam-title">Final Exam of Advanced Mathematics</h1>
        
        <div class="exam-questions">
            <!-- 第一题 -->
            <div class="question-item" data-answer="B">
                <div class="question-title">
                    <span class="question-number">1.</span>
                    <p>Extreme lim<sub>x→0</sub>The value of (sinx/x) is:</p>
                </div>
                <div class="question-options">
                    <label class="option-item">
                        <input type="radio" name="q1" value="A">
                        <span class="option-letter">A.</span>
                        <span class="option-content">0</span>
                    </label>
                    <label class="option-item">
                        <input type="radio" name="q1" value="B">
                        <span class="option-letter">B.</span>
                        <span class="option-content">1</span>
                    </label>
                    <label class="option-item">
                        <input type="radio" name="q1" value="C">
                        <span class="option-letter">C.</span>
                        <span class="option-content">∞</span>
                    </label>
                    <label class="option-item">
                        <input type="radio" name="q1" value="D">
                        <span class="option-letter">D.</span>
                        <span class="option-content">does not exist</span>
                    </label>
                </div>
                <div class="answer-feedback"></div>
            </div>

            <!-- 第二题 -->
            <div class="question-item" data-answer="C">
                <div class="question-title">
                    <span class="question-number">2.</span>
                    <p>The derivative of the function f (x)=x ³ at x=0 is:</p>
                </div>
                <div class="question-options">
                    <label class="option-item">
                        <input type="radio" name="q2" value="A">
                        <span class="option-letter">A.</span>
                        <span class="option-content">3</span>
                    </label>
                    <label class="option-item">
                        <input type="radio" name="q2" value="B">
                        <span class="option-letter">B.</span>
                        <span class="option-content">-3</span>
                    </label>
                    <label class="option-item">
                        <input type="radio" name="q2" value="C">
                        <span class="option-letter">C.</span>
                        <span class="option-content">0</span>
                    </label>
                    <label class="option-item">
                        <input type="radio" name="q2" value="D">
                        <span class="option-letter">D.</span>
                        <span class="option-content">∞</span>
                    </label>
                </div>
                <div class="answer-feedback"></div>
            </div>

            <!-- 第三题 -->
            <div class="question-item" data-answer="A">
                <div class="question-title">
                    <span class="question-number">3.</span>
                    <p>The result of the indefinite integral ∫ (1/x) dx is:</p>
                </div>
                <div class="question-options">
                    <label class="option-item">
                        <input type="radio" name="q3" value="A">
                        <span class="option-letter">A.</span>
                        <span class="option-content">ln|x| + C</span>
                    </label>
                    <label class="option-item">
                        <input type="radio" name="q3" value="B">
                        <span class="option-letter">B.</span>
                        <span class="option-content">1/x² + C</span>
                    </label>
                    <label class="option-item">
                        <input type="radio" name="q3" value="C">
                        <span class="option-letter">C.</span>
                        <span class="option-content">x + C</span>
                    </label>
                    <label class="option-item">
                        <input type="radio" name="q3" value="D">
                        <span class="option-letter">D.</span>
                        <span class="option-content">e<sup>x</sup> + C</span>
                    </label>
                </div>
                <div class="answer-feedback"></div>
            </div>
        </div>

        <div class="exam-controls">
            <button class="btn-submit">Submit answers</button>
        </div>
    </main>

     <!-- 页脚 -->
     <footer class="footer">
        <div class="footer-content">
            <div class="footer-logo">
                <a href="#home"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <div class="footer-text">
                <nav class="footer-nav">
                    <ul>
                        <li><a href="./about.html">About Us</a></li>
                        <li><a href="./contact.html">Contact Us</a></li>
                        <li><a href="./privacy.html">Privacy Policy</a></li>
                        <li><a href="./terms.html">Term of service</a></li>
                    </ul>
                </nav>
                <div class="footer-info">
                    <p>&copy; 2025 AceHub reserves all rights</p>
                </div>
            </div>
        </div>
    </footer>
    

    <script>
        document.querySelector('.btn-submit').addEventListener('click', function() {
            const questions = document.querySelectorAll('.question-item');
            let allAnswered = true;
            
            questions.forEach(question => {
                const selectedOption = question.querySelector('input[type="radio"]:checked');
                const feedback = question.querySelector('.answer-feedback');
                const correctAnswer = question.getAttribute('data-answer');
                
                if (!selectedOption) {
                    feedback.textContent = 'Please select an answer';
                    feedback.style.color = 'red';
                    allAnswered = false;
                } else {
                    const userAnswer = selectedOption.value;
                    if (userAnswer === correctAnswer) {
                        feedback.textContent = '✓ Correct! The correct answer is ' + correctAnswer;
                        feedback.style.color = 'green';
                    } else {
                        feedback.textContent = '✗ Wrong. The correct answer is' + correctAnswer;
                        feedback.style.color = 'red';
                    }
                }
            });
            
            if (allAnswered) {
                const score = calculateScore();
                alert(`Exam completed! Your score is: ${score}/${questions.length}`);
            }
        });
        
        function calculateScore() {
            const questions = document.querySelectorAll('.question-item');
            let score = 0;
            
            questions.forEach(question => {
                const selectedOption = question.querySelector('input[type="radio"]:checked');
                const correctAnswer = question.getAttribute('data-answer');
                
                if (selectedOption && selectedOption.value === correctAnswer) {
                    score++;
                }
            });
            
            return score;
        }
    </script>
    
    <!--页眉js-->
    <script>
        //Retrieve user information based on token
window.onload = function () {
const userid = localStorage.getItem('token');
//If a user logs in, display their profile picture in the info div; if not, display the login and registration button
if (userid) {
const user = JSON.parse(localStorage.getItem(userid));
let profileUrl = '';
let profileName = '';
let accountUrl = '';
if (userid === 'admin') {
profileUrl = '../account/admin-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/admin-profile.html';
} else if (userid === 'teacher') {
profileUrl = '../teacher/teacher-profile.html';
ProfileName='Personal Center';
accountUrl = '../teacher/teacher-profile.html';
} else {
profileUrl = '../student/student-profile.html';
ProfileName='My Learning';
accountUrl = '../account/student-setting.html';
}
document.querySelector('.info').innerHTML = `
                    <a href="${profileUrl}">
                        <img id="user-head" src="${user.avatar}" alt="用户头像"></a>
                    <div class="card">
                        <ul>
                            <li><a href="${profileUrl}">${profileName}</a></li>
                            <li><a href="${accountUrl}">Account Settings </a></li>
                            <li><a id="logout" href="#logout">Log Out</a></li>
                        </ul>
                    </div>
                `;
                //如果点击退出登录，清除token
                document.getElementById('logout').addEventListener('click', () => {
                    localStorage.removeItem('token');
                    window.location.href = '../Homepage/WebsiteHomepage.html';
                });
            }
            else {
                document.querySelector('.info').innerHTML = `
                    <a href="../account/login.html"><button class="login">log on</button></a>
                    <a href="../account/register.html"><button class="register">register</button></a>
                `;
            }
        }
    </script>
</body>
</html>